<template>
  <div>
    <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol" style="margin-top: 20px">
      <a-form-model-item label="小程序端系统转发好友功能" required>
        <a-switch v-model="form.shares" />
      </a-form-model-item>
      <a-form-model-item label="小程序端系统分享朋友圈功能" required>
        <a-switch v-model="form.forward" />
      </a-form-model-item>
      <a-form-model-item label="小程序卡片图" prop="picture">
        <JImageUpload :uploadParams="getUploadParams()" :isMultiple="false" :accept="'image/*'" @fileChange="fileChange" v-model="shareImg"></JImageUpload>
        <p>500x400px或者等比例图片，支持jpg、</p>
        <p>PNG、GIF格式，图片大小建议小于200k</p>
      </a-form-model-item>
      <a-form-model-item ref="name" label="小程序卡片标题" prop="shareTitle">
        <a-input
          :maxLength="36"
          v-model="form.shareTitle"
          @blur="
            () => {
              $refs.name.onFieldBlur()
            }
          "
        />
      </a-form-model-item>
      <a-form-model-item ref="name" label="海报文案" prop="shareDesc">
        <a-input
          type="textarea"
          :maxLength="15"
          v-model="form.shareDesc"
          @blur="
            () => {
              $refs.name.onFieldBlur()
            }
          "
        />
      </a-form-model-item>
    </a-form-model>
  </div>
</template>
<script>
import JImageUpload from '@/components/qiniuUpload/JImageUpload.vue'
import globalData from '@/assets/js/common'
export default {
  components: {
    JImageUpload
  },
  data() {
    let validatePicture = (rule, value, callback) => {
      if (!this.form.shareImg) {
        callback(new Error('请上传小程序卡片图'))
      } else {
        callback()
      }
    }
    return {
      labelCol: { span: 5 },
      wrapperCol: { span: 18 },
      shareImg: [],
      isSubmit: false, // 判断父组件是否可以点击提交
      form: {
        shareTitle: '',
        shareImg: '',
        shares: true,
        forward: true,
        shareDesc: ''
      },
      rules: {
        shareTitle: [{ required: true, message: '请填入小程序卡片标题', trigger: 'blur' }],
        shareDesc: [{ required: true, message: '请填入海报文案', trigger: 'blur' }],
        picture: [{ required: true, validator: validatePicture, trigger: 'change' }]
      }
    }
  },
  methods: {
    // 上传图片
    getUploadParams() {
      return { ...globalData.uploadParams }
    },
    fileChange(list) {
      this.form.shareImg = list[0].url
    },
    onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.isSubmit = true
          this.$emit('isSubmit', this.isSubmit)
          let params = JSON.parse(JSON.stringify(this.form))
          params.shares = params.shares ? ' 1' : '0'
          params.forward = params.forward ? ' 1' : '0'
          this.$emit('threeData', params)
        } else {
          return false
        }
      })
    },
    setData(data) {
      this.shareImg = data.shareImg
      this.form = data
      this.form.shares = data.shares == 1 ? true : false
      this.form.forward = data.forward == 1 ? true : false
    }
  }
}
</script>
<style  scoped lang="less">
</style>